<template>
  <div class="app-container">
    <el-button
      type="primary"
      size="small"
      icon="el-icon-circle-plus-outline"
      @click="add"
    >新增</el-button>
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" width="200">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="平台名称">
          <template slot-scope="scope">
            {{ scope.row.platformName }}
          </template>
        </el-table-column>
        <el-table-column label="平台标识">
          <template slot-scope="scope">
            {{ scope.row.platformMark }}
          </template>
        </el-table-column>
        <el-table-column label="积分导入系数">
          <template slot-scope="scope">
            {{ scope.row.importValue }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-third-eye"
              @click="watch(scope.row)"
            >查看</el-button> -->
            <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-third-edit"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-third-delete"
              @click="deletePlat(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="pageid"
          :page-sizes="[20,50,100]"
          :page-size="pagecount"
          :total="count"
          background
          highlight-current-row
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <edit-plat :dialog-table-visible="dialogTableVisible" :scope="scope" :add-scope="addScope" :watch-info="watchInfo" @closeDialog="closeDialog" />
    <edit-add :add-scope="addScope" @closeDialog="closeDialog" />
  </div>
</template>
<script>
import secret from '@/utils/secret'
// import { mapGetters } from 'vuex'
import EditPlat from './components/edit.vue'
import EditAdd from './components/add.vue'
import { getList, deletePlat } from '@/api/platformManage'
export default {
  name: 'PlatformManage',
  components: {
    EditPlat: EditPlat,
    EditAdd: EditAdd
  },
  data() {
    return {
      list: null,
      pageid: 1, // 当前页数
      pagecount: 20, // 每页显示条数
      count: null, // 总数量
      pages: null, // 总页数
      dialogTableVisible: false, // 遮罩
      scope: null, // 传值_编辑时
      watchInfo: null, // 查看
      addScope: false, // 传值_增加时
      power: null, // 权限
      platformManage_add: false, // 新增
      platformManage_edit: false, // 编辑
      platformManage_dele: false, // 删除
      flag: true
    }
  },
  /* computed: {
    ...mapGetters(['assignment', 'token'])
  }, */
  mounted() {
    this.loadList()
    this.dialogTableVisible = false
    // 权限
    // console.log(this.assignment)
    /* this.assignment.forEach(function(item) {
      if (!!item) { // eslint-disable-line
        if (item.menuCode === 'platformManage') {
          that.power = item.btnList
        }
      }
    })
    this.power.forEach(function(item) {
      if (!!item) { // eslint-disable-line
        if (item.code === 'platformManage_add') {
          that.platformManage_add = true
        }
        if (item.code === 'platformManage_edit') {
          that.platformManage_edit = true
        }
        if (item.code === 'platformManage_dele') {
          that.platformManage_dele = true
        }
      }
    }) */
  },
  methods: {
    // 请求列表
    loadList() {
      const param = {
        // token: this.token,
        pageid: '1',
        pagecount: '20'
      }
      console.log('请求参数')
      console.log(param)
      getList(secret.Encrypt(param)).then(response => {
        console.log('返回数据')
        console.log(response)
        this.list = response.data.list
        if (this.list.length === 0) {
          this.count = 0
        } else {
          this.count = parseInt(response.data.count) // 总数量
        }
      })
    },
    // 当前页面改变时
    handleSizeChange(num) {
      this.flag = false
      this.pagecount = num
      const data = {
        // token: this.token,
        pageid: 1,
        pagecount: parseInt(num)
      }
      console.log('请求参数')
      console.log(data)
      getList(secret.Encrypt(data)).then(response => {
        // 查无数据的情况
        this.flag = true
        this.pageid = 1
        this.list = response.data.list // 列表项
        if (this.list.length === 0) {
          this.count = 0
        } else {
          this.count = parseInt(response.data.count) // 总数量
        }
        console.log('返回数据')
        console.log(response)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 跳转某页
    handleCurrentChange(num) {
      const data = {
        // token: this.token,
        pageid: num,
        pagecount: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      // if (this.flag === true) {
      getList(secret.Encrypt(data)).then(response => {
        this.list = response.data.list // 列表项
        if (this.list.length === 0) {
          this.count = 0
        } else {
          this.count = parseInt(response.data.count) // 总数量
        }
        this.pageid = num // 当前页数
        console.log('返回数据')
        console.log(response)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
      // }
    },
    // 遮罩子组件回调
    closeDialog() {
      this.dialogTableVisible = false
      this.addScope = false
      setTimeout(() => {
        this.watchInfo = false
      }, 500)
      this.handleCurrentChange(this.pageid) // 刷新页面
    },
    // 编辑
    edit(scope) {
      console.log(scope)
      this.dialogTableVisible = true
      this.scope = scope
    },
    // 查看
    watch(scope) {
      this.dialogTableVisible = true
      this.watchInfo = true
      this.scope = scope
    },
    // 增加
    add() {
      this.dialogTableVisible = false
      this.addScope = true
    },
    // 删除
    deletePlat(scope) {
      this.$confirm('确定要删除该平台吗？删除平台后，将无法查询到平台下用户数据！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          // token: this.token,
          platformId: scope.platformId
        }
        console.log('请求参数')
        console.log(data)
        deletePlat(secret.Encrypt(data)).then(response => {
          console.log('返回数据')
          console.log(response)
          this.$message({
            message: response.resultDesc,
            type: 'success'
          })
          // 删除本页最后一条bug
          const pages = (this.count - 1) % this.pagecount
          if (pages === 0) {
            if (this.pageid > 1) {
              this.handleCurrentChange(parseInt(this.pageid - 1))
            } else {
              this.handleCurrentChange(parseInt(this.pageid))
            }
          } else if (pages > 0) {
            this.handleCurrentChange(this.pageid)
          }
        })
      }).catch(() => {
        console.log('删除取消')
      })
    }
  }
}
</script>
<style>
.app-head{
    padding: 6px 10px 0px 10px;
    border-radius: 10px;
  }
  .el-form-item{
    margin-bottom: 2px;
  }
  .pagination-container {
    /* width: 900px !important; */
    margin: 9px auto 0px auto !important;
  }
</style>
